<template>
  <span class="stars" :class="cssClass">
    <span v-for="cls in classes" :class="cls"></span>
  </span>
</template>

<script>
  const LENGTH = 5
  const CLS_ON = 'on'
  const CLS_HALF = 'half'
  const CLS_OFF = 'off'

  export default {
    props: {
      score: {type: Number},
      cssClass: {type: String}
    },
    computed: {
      classes () {
        let result = []
        let score = Math.floor(this.score) / 2
        let hasHalf = (this.score - Math.floor(score) !== 0)
        score = Math.floor(score)

        while (result.length < score) {
          result.push(CLS_ON)
        }

        if (hasHalf) {
          result.push(CLS_HALF)
        }

        while (result.length < LENGTH) {
          result.push(CLS_OFF)
        }

        return result
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  .stars{
    font-size: 0;
    display: inline-block;

    span{
      display: inline-block;
      width: 14px;
      height: 14px;
      background-size: 10px 10px;
    }
  }
  .on{
    background: url(star24_on@2x.png) no-repeat 50% 50%;
  }
  .half{
    background: url(star24_half@2x.png) no-repeat 50% 50%;
  }
  .off{
    background: url(star24_off@2x.png) no-repeat 50% 50%;
  }
</style>
